{% extends 'main_frame.html' %}

{% block content %}
{% include "search.html" %}
<table class="layui-hide" id="LAY_table" lay-filter="LAY_table"></table>
<script type="text/html" id="LAY_bar">
    <a class="layui-btn layui-btn-xs" lay-event="view" title="">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" title="">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete" title="">删除</a>
</script>
<div class="layui-bar-buttons">
    <span id="add_role">添加</span>
</div>
{% endblock %}


{% block js %}
<script>

    var cols=[[
        {type: 'numbers',title: '序号',width: 60},
        {field:'name',title: '角色名称',width: 150},
        {field:'code',title: '角色编码',width: 150},
        {field:'enabled',title: '是否可用',width: 150},
        {field:'btns',title: '操作',align: 'center',toolbar: '#LAY_bar',event:'click',fixed: 'right',width:160}
    ]]

    //监听工具栏
    layui.table.on('tool(LAY_table)', function(obj) {
        var data = obj.data;
        switch(obj.event){
            //查看
            case 'view' :
                Methods.view(data);
                break;
            //修改
            case 'edit' :
                Methods.edit(data);
                break;
            //删除
            case 'delete' :
                Methods.delete(data);
                break;

            default:
                break;
        }
    });
    //方法集合
    var Methods={
        render:function(where){
            layui.table.render({
                elem: '#LAY_table',
                method:'POST',
                contentType:'application/json',
                url:API.role.list,
                where:where,
                cols: cols,
                id: 'LAY_table',
                page: true,
                limits: [10, 15, 20, 30, 40, 50],
                loading: true,
                height: FX.getWinHeight(74),
                skin: '', //行边框风格
                even: true, //开启隔行背景
                size: 'big', //小尺寸的表格
                done:function(){

                }
            });
        },
        view:function(data){
            layer.open({
                type: 1,
                title:'信息',
                btn: ['关闭'],
                area:['640px','400px'],
                shadeClose:true,
                anim:5,
                content:function(){
                    return FX.getView({
                        '角色':data.name,
                        '角色编码':data.code,
                        '是否可用':data.enabled
                    })
                }(),
                yes:function(index, layero){
                    layer.close(index);
                },
                end:function(){

                },
                success:function(layero,index){

                }
            });
        },

        edit:function(data){
            layer.open({
                type: 1,
                title:'信息',
                btn: ['保存'],
                area:['640px','400px'],
                shadeClose:true,
                anim:5,
                content:function(){
                    return renderForm([
                        { title:{name:'角色ID'},content:[{type:'hidden',name:'id',disabled:true,value:data.id}]},
                        { title:{name:'角色名'}, content:[{type:'input',name:'name',verify:true,value:data.name}]},
                        { title:{name:'角色编码'}, content:[{type:'input',name:'code',verify:true,value:data.code}]},
                        { title:{name:'是否可用'}, content:[{type:'input',name:'enabled',value:data.enabled}]}
                    ])

                }(),
                yes:function(index, layero){
                    layui.form.on('submit(lay-submit)', function(obj){
                        FX.ajax({
                            url:API.role.edit,
                            type:'post',
                            data:obj.field,
                            success:function(res){
                                FX.success('修改成功');
                                layer.close(index);
                            }
                        })
                        return false;
                    });
                    $("#lay_submit_btn").click();
                },
                end:function(){

                },
                success:function(layero,index){
                    layui.form.render('select');
                    FX.initDate();
                }
            })
        },
        add:function(data){
            layer.open({
                type: 1,
                title:'信息',
                btn: ['保存'],
                area:['640px','400px'],
                shadeClose:true,
                anim:5,
                content:function(){
                    return renderForm([
                        { title:{name:'角色名称'}, content:[{type:'input',name:'name',verify:true}]},
                        { title:{name:'角色编码'}, content:[{type:'input',name:'code',verify:true}]},
                        { title:{name:'是否可用'}, content:[{type:'input',name:'enabled'}]}
                    ])

                }(),
                yes:function(index, layero){
                    layui.form.on('submit(lay-submit)', function(obj){
                        FX.ajax({
                            url:API.role.add,
                            type:'post',
                            data:obj.field,
                            success:function(res){
                                FX.success('添加成功');
                                layer.close(index);
                            }
                        })
                        return false;
                    });
                    $("#lay_submit_btn").click();
                },
                end:function(){

                },
                success:function(layero,index){
                    layui.form.render('select');
                    FX.initDate();
                }
            });
        },
        delete:function(obj){
            layer.confirm('是否删除',function(index){
                layer.close(index);
                FX.ajax({
                    url:API.role.delete + obj.id,
                    success:function(res){
                        if(res.code==0){
                            FX.success('删除成功');
                        }
                    }
                })

            })
        }
    }
    $("#add_role").click(function(){
        Methods.add();
    })


    Methods.render();
    FX.getSearch(WHERE.brandList,Methods.render);

</script>
{% endblock %}